<template>
	<view class="content">
		<view class="background">
			<view class="search-box-false">
				<image src="/static/index-search.png"></image>
				<input placeholder="请输入关键字"/>
			</view>
			<view class="search-box-true">
				<view class="search-box">
					<image src="/static/index-search.png"></image>
					<input placeholder="请输入关键字"/>
				</view>
				<view @click="navTo('/pages/user/searchOrder')" class="search-box-button">搜索</view>
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="tab==index?'current':''" @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>

<empty v-if="tap.length === 0"></empty>
					<!-- 订单列表 -->
					<view v-for="(item,index) in tap" v-if="item.state==tab" :key="index" class="order-item">
						<view class="i-top">
							<text class="time">{{item.time}}</text>
							<text class="state" :style="{color: item.stateTipColor}">{{item.stateTip}}</text>
							<text  v-if="item.state===9" class="del-btn yticon icon-iconfontshanchu1"
 @click="deleteOrder(index)"></text>
						</view>
						
					<view v-if="item.goodsList.length > 1"> 
						<view :class="lg>0?'goods-box-single aa':'goods-box-single'" v-for="(data,lg) in item.goodsList" :key="lg">
							<image class="goods-img" :src="data.image" mode="aspectFill"></image>
							<view class="right">
								<text class="title clamp">{{data.title}}</text>
								<text class="attr-box">{{data.attr}}</text>
								<view class="price-number">
									<text class="price">{{data.price}}</text>
									<text>x{{data.number}}</text>
								</view>
							</view>
						</view>
					</view>	
					
						<view v-if="item.goodsList.length == 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsIndex">
							<image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
							<view class="right">
								<text class="title clamp">{{goodsItem.title}}</text>
								<text class="attr-box">{{goodsItem.attr}}</text>
								<view class="price-number">
									<text class="price">{{goodsItem.price}}</text>
									<text>x{{goodsItem.number}}</text>
								</view>
							</view>
						</view>
						
						<view class="price-box">
							共
							<text class="num">7</text>
							件商品 实付款
							<text class="price">143.7</text>
						</view>
						<view class="action-box b-t" v-if="item.state != 9">
							<button class="action-btn" @click="cancelOrder(item)">取消订单</button>
							<button class="action-btn recom">立即支付</button>
						</view>
					</view>
					 
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import Json from '@/Json';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tab:0,
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '待付款',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 1,
						text: '待发货',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 2,
						text: '待收货',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 3,
						text: '待评价',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 4,
						text: '已完成',
						loadingType: 'more',
						orderList: []
					},
					{
						state: 5,
						text: '售后/退款',
						loadingType: 'more',
						orderList: []
					}
				],
				tap:[{
						time: '2019-04-06 11:37',
						state: 0,
						stateTip:'',
						stateTipColor:'',
						goodsList: [{
							title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							price: 69,
							image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							number: 1,
							attr: '白色-高帮 39'
						},{
							title: '古黛妃 短袖t恤女 春夏装2019新款韩版宽松',
							price: 179.5,
							image: 'https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg',
							number: 1,
							attr: '珊瑚粉 M'
						}]
					},{
						time: '2019-04-06 11:37',
						state: 1,
						stateTip:'',
						stateTipColor:'',
						goodsList: [{
							title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							price: 69,
							image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							number: 1,
							attr: '白色-高帮 39'
						},{
							title: '古黛妃 短袖t恤女 春夏装2019新款韩版宽松',
							price: 179.5,
							image: 'https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg',
							number: 1,
							attr: '珊瑚粉 M'
						}]
					},
					{
						time: '2019-04-06 11:37',
						state: 1,
						stateTip:'',
						stateTipColor:'',
						goodsList: [{
							title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							price: 69,
							image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							number: 1,
							attr: '白色-高帮 39'
						}]
					},
					{
						time: '2019-04-06 11:37',
						state: 1,
						stateTip:'',
						stateTipColor:'',
						goodsList: [{
							title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							price: 69,
							image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							number: 1,
							attr: '白色-高帮 39'
						}]
					}
				]
			};
		},
		
		onLoad(){
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#a286eb'
			});
			for(let i=0;i<this.tap.length;i++){
				let stateTip = '',
					stateTipColor = '#a387eb';
				switch(this.tap[i].state){
					case 0:
						stateTip = '待付款'; break;
					case 1:
						stateTip = '待发货'; break;
					case 2:
						stateTip = '待收货'; break;
					case 3:
						stateTip = '待评价'; break;
					case 4:
						stateTip = '已完成'; break;
					case 5:
						stateTip = '售后'; break;
					case 9:
						stateTip = '订单已关闭'; 
						stateTipColor = '#999';
						break;
						
					//更多自定义
				}
				console.log(this.tap[i]);
				this.tap[i].stateTip=stateTip;
				this.tap[i].stateTipColor=stateTipColor;
				// this.tap[i].push('stateTipColor':stateTipColor);
			}
		},
		 
		methods: {
			//跳转界面
			navTo(url){
				uni.navigateTo({  
					url
				})  
			}, 
			tabClick(num){
				this.tab=num;
			}
		},
	}
</script>

<style lang="scss">
	page,.content{ background: #f7f7f7;height: 100%; }
	.background{ background: #fff;padding: 20rpx 30rpx; }
	.search-box-false{ height: 54rpx;width: 100%;border-radius: 27rpx;background: #f7f7f7;display: none;align-items: center; }
	.search-box-false image{ height: 35rpx;width: 35rpx;margin: 0 15rpx; }
	.search-box-false input{ font-size: 24rpx;flex: 1; }
	.search-box-true{ height: 54rpx;width: 100%;display: flex;align-items: center; }
	.search-box { height: 54rpx;border-radius: 27rpx;background: #f7f7f7;display: flex;align-items: center;flex: 1; }
	.search-box image{ height: 35rpx;width: 35rpx;margin: 0 15rpx; }
	.search-box input{ font-size: 24rpx;flex: 1; }
	.search-box-button { border: 1px #ccc solid;line-height: 54rpx;font-size: 28rpx;background: #a387eb;padding: 0 30rpx;margin-left: 15rpx;cursor: pointer;border-radius: 20rpx; }
	.search-box-true image{ height: 35rpx;width: 35rpx;margin: 0 15rpx; }
	.swiper-box{ height: calc(100% - 40px); }
	.swiper-box{ height: calc(100% - 40px); }
	.list-scroll-content{ height: 100%; }
	.navbar{ display: flex;height: 80rpx;padding: 0 10rpx;background: #fff;box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);position: relative;z-index: 10; }
	.nav-item{ flex: 1;display: flex;justify-content: center;align-items: center;height: 100%;font-size: 28rpx;color: #333;position: relative; }
	.nav-item.current{ color: #a387eb; }
	.nav-item.current:after{ content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 44rpx;height: 0;border-bottom: 6rpx solid #a387eb; }
	.order-item{ display: flex;flex-direction: column;padding: 0 30rpx;background: #fff;margin: 30rpx 30rpx;border-radius: 20rpx; }
	.i-top{ display: flex;align-items: center;height: 80rpx;font-size: 28rpx;color: #333; }
	.time{ flex: 1; }
	.state{ color: #a387eb; }
	.goods-box-single{ display: flex;padding: 20rpx 0; }
	.aa{ border-top: 2rpx #eee dashed; }
	.goods-img{ display: block;width: 135rpx;height: 135rpx; }
	.right{ flex: 1;display: flex;flex-direction: column;padding-left:24rpx;overflow: hidden; }
	.title{ font-size: 30rpx;color: #333;line-height: 1; }
	.attr-box{ font-size: 24rpx;color: #999;padding: 15rpx 0; }
	.price-number{ display: flex;align-items: center; }
	.price-number text{ font-size: 24rpx;color: #999; }
	.price-number .price{ font-size: 40rpx;color: #f00;flex: 1; }
	.right .price:before{ content: '￥';font-size: 24rpx;margin: 0 2rpx 0 8rpx; }
	.price-box{ display: flex;justify-content: flex-end;align-items: baseline;padding-bottom: 20rpx;font-size: 26rpx;color: #999; }
	.num{ margin: 0 8rpx;color: #333; }
	.price-box .price{ font-size: 32rpx;color: #333; }
	.price-box .price:before{ content: '￥';font-size: 24rpx;margin: 0 2rpx 0 8rpx; }
	.action-box{ display: flex;justify-content: flex-end;align-items: center;height: 100rpx; }
	.action-btn{ width: 160rpx;height: 60rpx;margin: 0;margin-left: 24rpx;padding: 0;text-align: center;line-height: 60rpx;font-size: 26rpx;color: #333;background: #fff;border-radius: 100px; }
	.action-btn:after{ border-radius: 100px; }
	.action-btn.recom{ background: #fce8fc;color: #a387eb; }
	.action-btn.recom:after{ border-color: #a387eb; }
	.uni-load-more { display: flex;flex-direction: row;height: 80rpx;align-items: center;justify-content: center }
	.uni-load-more__text { font-size: 28rpx;color: #999; }
	.uni-load-more__img { height: 24px;width: 24px;margin-right: 10px }
	.uni-load-more__img>view { position: absolute }
	.uni-load-more__img>view view { width: 6px;height: 2px;border-top-left-radius: 1px;border-bottom-left-radius: 1px;background: #999;position: absolute;opacity: .2;transform-origin: 50%;animation: load 1.56s ease infinite }
	.uni-load-more__img>view view:nth-child(1) { transform: rotate(90deg);top: 2px;left: 9px }
	.uni-load-more__img>view view:nth-child(2) { transform: rotate(180deg);top: 11px;right: 0 }
	.uni-load-more__img>view view:nth-child(3) { transform: rotate(270deg);bottom: 2px;left: 9px }
	.uni-load-more__img>view view:nth-child(4) { top: 11px;left: 0 }
	.load1,.load2,.load3 { height: 24px;width: 24px }
	.load2 { transform: rotate(30deg) }
	.load3 { transform: rotate(60deg) }
	.load1 view:nth-child(1) { animation-delay: 0s }
	.load2 view:nth-child(1) { animation-delay: .13s }
	.load3 view:nth-child(1) { animation-delay: .26s }
	.load1 view:nth-child(2) { animation-delay: .39s }
	.load2 view:nth-child(2) { animation-delay: .52s }
	.load3 view:nth-child(2) { animation-delay: .65s }
	.load1 view:nth-child(3) { animation-delay: .78s }
	.load2 view:nth-child(3) { animation-delay: .91s }
	.load3 view:nth-child(3) { animation-delay: 1.04s
 }
	.load1 view:nth-child(4) { animation-delay: 1.17s
 }
	.load2 view:nth-child(4) { animation-delay: 1.3s
 }
	.load3 view:nth-child(4) { animation-delay: 1.43s
 }
	@-webkit-keyframes load { 0%{ opacity: 1 } 100%{ opacity: .2 } }
</style>
